<template>
  <div class="bottomnav">
      <div class="bottomnav-container"  >
        <vant-li title="首页"  icon="icon-shouye" to="/home"  ></vant-li>
        <vant-li title="分类" icon="icon-fenlei" to="/types"  ></vant-li>
        <vant-li title="购物车" icon="icon-gouwuche" to="/cart"  ></vant-li>
        <vant-li title="我的" icon="icon-my" to="/profile"  ></vant-li>
    </div>
 </div>
</template>

<script>
import vantLi from './vantli.vue'
export default {
  name: 'bottomnav',
  data() { 
    return {

    }
  },
  created() {
   
  },
  methods:{
    ck(e){
      console.log(e);
      
    }
  },
  components:{
    vantLi
  }
 }
</script>
<style lang="scss" scoped>
.bottomnav{
    width: 100%;
    height: 1.275rem;
    position: fixed; 
    bottom: 0;
    left: 0;
    background-color: white;
    .bottomnav-container{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        div{
            width: 25%;
            height: 80%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-flow: column;
        }
    }
}
</style>